<!-- toggle交互组件 -->
<template>
  <!-- 外层椭圆 -->
  <div
    :class="['checkbox', { actived: actived }]"
    ref="toggle-box"
    @click="handleToggleClick"
  >
    <span class="text text-left">{{ activedText }}</span>
    <span class="text text-right">{{ unActivedText }}</span>
    <div class="toggle"></div>
  </div>
</template>

<script>
export default {
  name: 'ToggleButton',

  components: {},

  model: {
    prop: 'activedProp',
    event: 'updateActived',
  },

  props: {
    activedText: {
      type: String,
      default: '启',
    }, // 激活状态下文字提示
    unActivedText: {
      type: String,
      default: '禁',
    }, // 未激活状态下文字提示
    activedProp: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {}
  },

  computed: {
    actived: {
      get() {
        return this.activedProp
      },
      set(val) {
        this.$emit('updateActived', val)
      },
    },
  },

  methods: {
    handleToggleClick(e) {
      this.actived = !this.actived
      this.$emit('on-change', this.actived)
    },
  },
}
</script>

<style lang="less" scoped>
.checkbox {
  width: 38px;
  height: 18px;
  line-height: 18px;
  background: rgba(199, 205, 218, 1);
  border-radius: 9px;
  cursor: pointer;
  padding: 1px;
  position: relative;

  box-shadow: 0 0 1px 1px rgba(199, 205, 218, 1);

  .toggle {
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 3px 0px rgba(77, 75, 93, 0.23);
    border-radius: 50%;

    transform: translate(0, 0);

    transition: transform 0.2s ease-out;
  }
  .text {
    position: absolute;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);

    top: 0;
    bottom: 0;
  }
  .text-left {
    left: 4px;
  }
  .text-right {
    right: 4px;
  }
}
.actived {
  background-color: rgba(22, 139, 245, 1);
  box-shadow: 0 0 1px 1px rgba(22, 139, 245, 1);
  .toggle {
    transform: translate(20px, 0);
  }
}
</style>
